<script setup lang="ts">
import { Search, ArrowRightBold } from '@element-plus/icons-vue'
import APIAuthView from '@/api/auth-view'
import Authorization from './components/Authorization/index.vue'

const searchValue = shallowRef<string>('')


const authCertificate = ref<any>({})
const isShowType = shallowRef<number>(1)

const loading = shallowRef<boolean>(false)

function handleSearch() {
    loading.value = true
    APIAuthView.getAuthCertificate(searchValue.value).then(({ data }) => {
        authCertificate.value = data
        isShowType.value = 2
    }).catch(() => {
        isShowType.value = 1
    }).finally(() => {
        loading.value = false
    })
}


function handleShowDownload(type: number) {
    isShowType.value = type
}

</script>

<template>
    <div class="auth">
        <div class="auth-content">

            <div class="search">
                <div class="title">授权查询</div>
                <div class="select-input">
                    <input v-model="searchValue" type="text" placeholder="请输入授权编号" />
                    <button @click="handleSearch">
                        <el-icon size="20px">
                            <Search />
                        </el-icon>
                    </button>
                </div>
            </div>
            <div v-loading="loading">
                <div class="content" v-if="isShowType == 2">
                    <div class="title">
                        <p>授权情况：SHOUQUANQINKUAN</p>
                        <p @click="handleShowDownload(3)">授权牌
                            <el-icon size="15px">
                                <ArrowRightBold />
                            </el-icon>
                        </p>
                    </div>
                    <ul class="list">
                        <li class="item">
                            <div class="label">授权书编号：<span>{{ authCertificate?.order?.auth_code }}(授权编号)</span></div>
                            <div class="value"></div>
                        </li>
                        <li class="item">
                            <div class="label">产品信息：</div>
                            <div class="value">
                                <div class="t">产品编号：</div>
                                <div class="c">{{ authCertificate.order.goods_code }}</div>
                            </div>
                            <div class="value">
                                <div class="t">产品类型：</div>
                                <div class="c">{{ authCertificate.type_name }}</div>
                            </div>
                            <div class="value">
                                <div class="t">授权类型：</div>
                                <div class="c">{{ authCertificate?.order?.auth_type }} | {{
                                    authCertificate?.order?.auth_detail }} <span
                                        v-if="authCertificate?.order?.auth_scope">|</span> {{
                                            authCertificate?.order?.auth_scope
                                        }}</div>
                            </div>
                            <div class="value">
                                <div class="t">授权时间：</div>
                                <div class="c">{{ authCertificate?.auth_user?.authorize_time }}</div>
                            </div>
                            <div class="value" v-if="authCertificate?.order?.auth_duration">
                                <div class="t">授权时长：</div>
                                <div class="c">{{ authCertificate?.order?.auth_duration }}</div>
                            </div>
                        </li>
                        <li class="item">
                            <div class="label">卖方信息：</div>
                            <div class="value">
                                <div class="t">卖方ID：</div>
                                <div class="c">{{ authCertificate?.order?.seller_code }}</div>
                            </div>
                            <div class="value">
                                <div class="t">昵称：</div>
                                <div class="c">{{ authCertificate?.seller?.auth_info?.real_name }}</div>
                            </div>
                            <div class="value">
                                <div class="t">姓名：</div>
                                <div class="c">{{ authCertificate?.seller?.auth_info?.real_name }}</div>
                            </div>
                            <div class="value">
                                <div class="t">身份证：</div>
                                <div class="c">{{ authCertificate?.seller?.auth_info?.id_card }}</div>
                            </div>
                        </li>
                        <li class="item">
                            <div class="label">买方信息：</div>
                            <div class="value">
                                <div class="t">买方ID：</div>
                                <div class="c">{{ authCertificate?.order?.buyer_code }}</div>
                            </div>
                            <div class="value">
                                <div class="t">姓名：</div>
                                <div class="c">{{ authCertificate?.order?.authorize_name }}</div>
                            </div>
                            <div class="value">
                                <div class="t">身份证：</div>
                                <div class="c">{{ authCertificate?.order?.authorize_code }}</div>
                            </div>
                        </li>
                    </ul>
                </div>
                <Authorization v-if="isShowType == 3" :authCertificate="authCertificate" />
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.auth {
    box-sizing: border-box;
    width: 1340px;
    padding: 0 20px;
    margin: 100px auto;

    .auth-content {
        box-sizing: border-box;
        min-height: 500px;
        border-radius: 16px;
        border: 3px solid var(--primary-color);
        padding-bottom: 100px;

        .content {
            margin-top: 90px;
            margin-left: 35px;

            .list {
                list-style: none;
                margin-top: 46px;
                font-size: 14px;

                .item {
                    margin-bottom: 44px;
                    display: flex;
                    flex-direction: column;
                    gap: 10px 0;

                    .value {
                        margin-left: 9px;
                        display: flex;

                        .c {
                            color: rgba(63, 144, 247, 1);
                            font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
                        }

                    }

                    .label {
                        display: flex;
                        align-items: center;

                        span {
                            color: rgba(63, 144, 247, 1);
                            font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
                        }

                        &::before {
                            content: '';
                            display: block;
                            width: 3px;
                            height: 15px;
                            background-color: var(--primary-color);
                            margin-right: 6px;
                        }
                    }
                }
            }

            .title {
                display: flex;

                p {
                    font-size: 20px;

                    &:first-child {
                        color: rgba(154, 154, 154, 1);
                    }

                    &:last-child {
                        color: rgba(55, 133, 242, 1);
                        margin-left: 40px;
                        cursor: pointer;
                        display: flex;
                        align-items: center;
                        font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
                    }
                }
            }
        }

        .search {
            display: flex;
            justify-content: center;
            gap: 0 10px;
            padding-top: 100px;

            .title {
                color: var(--primary-color);
                color: var(--primary-color);
                font-size: 30px;
            }

            .select-input {
                display: flex;
                border-radius: 5px;
                overflow: hidden;
                border: 1px solid var(--primary-color);
                width: 510px;
                height: 44px;

                input {
                    box-sizing: border-box;
                    display: block;
                    outline: none;
                    width: calc(100% - 122px);
                    border: none;
                    padding-left: 10px;
                    font-size: 16px;
                }

                button {
                    outline: none;
                    border: none;
                    width: 122px;
                    background-color: var(--primary-color);
                    color: #ffffff;
                    font-size: 18px;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 0 5px;
                    border-radius: 0 5px 5px 0;
                }
            }
        }
    }
}
</style>